<!--- Role params --->
<cfparam name="regionID" type="integer" default="0">
<!--- Sorting params --->
<cfparam name="orderBy" type="string" default="#client.volunteersOrderBy#">
<cfparam name="orderDir" type="string" default="#client.volunteersOrderDir#">
<!--- Filter params --->
<cfparam name="filterRegionIDs" type="string" default="#client.volunteersRegionIDs#">
<cfparam name="filterPeriod" type="string" default="#client.volunteersPeriod#">
<cfparam name="filterFromDate" type="string" default="#client.volunteersFromDate#">
<cfparam name="filterToDate" type="string" default="#client.volunteersToDate#">
<!--- Checkboxes --->
<cfparam name="volunteerIDs" type="string" default="">

<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
	<cfset volunteers = application.volunteerGateway.getAllAsQuery("distinct volunteer.*", regionID, orderBy, orderDir, filterRegionIDs, filterPeriod, filterFromDate, filterToDate)>
<cfelse>
	<cfset volunteers = application.volunteerGateway.getAllAsQuery("distinct volunteer.*", orderBy, orderDir)>
</cfif>

<cfoutput>

	<cfform name="volunteersForm" id="volunteersForm" action="#script_name#" method="post" onsubmit="return validateFilter();">
		<cfinput type="hidden" name="view" value="#view#">

		<div class="buttonBar">
			<table cellpadding="0" cellspacing="0" border="0" width="100%">
				<tr>
					<td>
						<cfif (IsUserInRole("Super User") or IsUserInRole("Regional Admin")) and volunteers.RecordCount gt 0>
							<a href="" onclick="emailSelected(); return false;" class="formLink">E-mail selected</a>
							<a href="/applications/admin/methods/export.cfm?view=#view#&regionID=#regionID#" target="_blank" class="formLink">Export</a>
						</cfif>
					</td>
					<td align="right">
						<strong>Count:</strong> #volunteers.RecordCount#
					</td>
				</tr>
			</table>
		</div>

		<!--- filter --->
		<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
			<script language="javascript" type="text/javascript" src="common/datetimepicker.js"></script>
			<script language="javascript" type="text/javascript" src="common/extendedDate.js"></script>
			<script type="text/javascript" language="javascript">
			<!--
				toggleVisibility = function(objId) {
					var obj = document.getElementById(objId);
					if (obj.style.visibility == "visible") {
						obj.style.visibility = "hidden";
						obj.style.display = "none";
					} else {
						obj.style.visibility = "visible";
						obj.style.display = "block";
					}
				}

				updateFilterLink = function() {
					if (document.getElementById("filterSelections").style.visibility == "visible") {
						document.getElementById("filterLink").innerHTML = '#minusImage#&nbsp;Hide Filter';
					} else {
						document.getElementById("filterLink").innerHTML = '#plusImage#&nbsp;Show Filter';
					}
				}

				updateIDsSelect = function(selectObj) {
					if (selectObj.selectedIndex == 0) {
						selectObj.selectedIndex = 0;
					}
				}

				updateTimePeriod = function(radioObj) {
					if ($(radioObj).val() == "Date") {
						$("##filterPeriodDates").show();
					} else {
						$("##filterPeriodDates").hide();
					}
					$("##filterFromDate").val("");
					$("##filterToDate").val("");
				}
				
				validateFilter = function() {
					var errorMessage = "";
					var f = document.getElementById("volunteersForm");
					
					if (radioSelectedValue(f.filterPeriod) == "Date") {
						var fromDate = new ExtendedDate();
						fromDate.setDate(f.filterFromDate.value);
						if (!fromDate.isValid()) {
							errorMessage = errorMessage + "From Date date is required and must be in m\/d\/yyyy format\n";
						}

						var toDate = new ExtendedDate();
						toDate.setDate(f.filterToDate.value);
						if (!toDate.isValid()) {
							errorMessage = errorMessage + "To Date date is required and must be in m\/d\/yyyy format\n";
						}
						
						if (toDate.isBefore(fromDate)) {
							errorMessage = errorMessage + "To Date must be after From Date\n";
						}
					}
					
					if (errorMessage.length) {
						alert(errorMessage);
						return false;
					} else {
						return true;
					}
				}

			// -->
			</script>

			<cfset regions = application.countyGateway.getRegions()>

			<table class="filter" width="100%">
				<tr>
					<td class="filterHeader"><a id="filterLink"href="" onclick="toggleVisibility('filterSelections'); toggleVisibility('filterButtons'); updateFilterLink(); return false;" style="width: 100px; display: inline-block;">#plusImage#&nbsp;Show Filter</a><cfif filterRegionIDs neq 0>List is filtered</cfif></td>
				</tr>
				<tr id="filterSelections" style="visibility: hidden; display: none;">
					<td>

						<table>
							<tr>
								<cfif IsUserInRole("Super User")>
									<td>
										<fieldset>
											<legend>Regions</legend>
											<cfselect name="filterRegionIDs" size="7" multiple="true" required="yes" message="Region filter is required" onChange="updateIDsSelect(this);" style="width: 80px;">
												<option value="0"<cfif filterRegionIDs eq 0> selected</cfif>>All</option>
												<option value="-1"<cfif filterRegionIDs eq -1> selected</cfif>>Statewide</option>
												<cfloop query="regions">
													<option value="#Region_ID#"<cfif ListFind(filterRegionIDs, Region_ID)> selected</cfif>>#Region_ID#</option>
												</cfloop>
											</cfselect>
											<div class="footnote">Ctrl to multi-select</div>
										</fieldset>
									</td>
								</cfif>
								<td>
									<fieldset>
										<legend>Time Period</legend>
										<input type="radio" id="Period1" autocomplete="off" name="filterPeriod" value="All" onclick="updateTimePeriod(this);"<cfif filterPeriod eq "All"> checked="true"</cfif>><label for="Period1">&nbsp;All</label><br>
										<input type="radio" id="Period2" autocomplete="off" name="filterPeriod" value="Date" onclick="updateTimePeriod(this);"<cfif filterPeriod eq "Date"> checked="true"</cfif>><label for="Period2">&nbsp;By Date</label>
										<div id="filterPeriodDates"<cfif filterPeriod neq "Date"> style="display: none;"</cfif>>
											<label for="filterFromDate">From:</label>&nbsp;<input type="text" name="filterFromDate" id="filterFromDate" value="#filterFromDate#" size="12" style="width: 80px;">&nbsp;<a href="javascript:NewCal('filterFromDate','mmddyyyy')"><img src="common/images/calendar.gif" width="11" height="10" border="0" alt="Open date picker"></a>
											&nbsp;
											<label for="filterToDate">To:</label>&nbsp;<input type="text" name="filterToDate" id="filterToDate" value="#filterToDate#" size="12" style="width: 80px;">&nbsp;<a href="javascript:NewCal('filterToDate','mmddyyyy')"><img src="common/images/calendar.gif" width="11" height="10" border="0" alt="Open date picker"></a><br>
										</div>
									</fieldset>
								</td>
								<td width="100%"></td>
							</tr>
						</table>

					</td>
				</tr>
				<tr id="filterButtons" style="visibility: hidden; display: none;">
					<td>
						<div style="margin-bottom: 4px;">
							<cfinput type="submit" name="applyFilterButton" id="applyFilterButton" value="Apply Filter" class="formButton2">
							<cfif filterRegionIDs neq 0>
								<a href="#script_name#?view=#view#&filterRegionIDs=0" class="formLink2">Clear filter</a>
							</cfif>
						</div>
					</td>
				</tr>
			</table>
		</cfif>

		<cfif volunteers.RecordCount gt 0>

			<!--- checkbox functions --->
			<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
				<script type="text/javascript" language="javascript">
				<!--
					toggleSelectAll = function(f) {
						var c = f.selectAllCheckbox;
						for (var i=0; i<f.volunteerIDs.length; i++) {
							if (c.checked) {
								f.volunteerIDs[i].checked = true;
							} else {
								f.volunteerIDs[i].checked = false;
							}
						}
					}

					updateSelectAll = function(chk) {
						if (!chk) {
							document.getElementById("selectAllCheckbox").checked = false;
						}
					}

					emailSelected = function() {
						var f = document.getElementById("volunteersForm");
						var volunteerIDs = new Array();
						for (var i=0; i<f.volunteerIDs.length; i++) {
							if (f.volunteerIDs[i].checked) {
								volunteerIDs[volunteerIDs.length] = f.volunteerIDs[i].value;
							}
						}
						if (volunteerIDs.length == 0) {
							alert("Select at least one volunteer");
						} else {
							eSF = document.getElementById("emailSelectedForm");
							eSF.volunteerIDs.value = volunteerIDs;
							eSF.submit();
						}
					}
				// -->
				</script>
			</cfif>
			<table class="list" width="100%">
				<tr>
					<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
						<th><input name="selectAllCheckbox" id="selectAllCheckbox" type="checkbox" onclick="toggleSelectAll(this.form);"></th>
					</cfif>
					<th><a href="#script_name#?view=#view#&orderBy=volunteer.Volunteer_ID<cfif orderBy eq 'volunteer.Volunteer_ID' and orderDir eq 'asc'>&orderDir=desc</cfif>">ID<cfif orderBy eq "volunteer.Volunteer_ID">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<cfif IsUserInRole("Super User")>
						<th><a href="#script_name#?view=#view#&orderBy=Region_ID<cfif orderBy eq 'Region_ID' and orderDir eq 'asc'>&orderDir=desc</cfif>">Region<cfif orderBy eq "Region_ID">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					</cfif>
					<th><a href="#script_name#?view=#view#&orderBy=Last_Name<cfif orderBy eq 'Last_Name' and orderDir eq 'asc'>&orderDir=desc</cfif>">Name<cfif orderBy eq "Last_Name">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<th><a href="#script_name#?view=#view#&orderBy=Title<cfif orderBy eq 'Title' and orderDir eq 'asc'>&orderDir=desc</cfif>">Title<cfif orderBy eq "Title">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<th><a href="#script_name#?view=#view#&orderBy=Organization<cfif orderBy eq 'Organization' and orderDir eq 'asc'>&orderDir=desc</cfif>">Organization<cfif orderBy eq "Organization">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<th><a href="#script_name#?view=#view#&orderBy=Phone1<cfif orderBy eq 'Phone1' and orderDir eq 'asc'>&orderDir=desc</cfif>">Phone<cfif orderBy eq "Phone1">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<th><a href="#script_name#?view=#view#&orderBy=Email<cfif orderBy eq 'Email' and orderDir eq 'asc'>&orderDir=desc</cfif>">E-mail<cfif orderBy eq "Email">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
					<th><a href="#script_name#?view=#view#&orderBy=Date_Created<cfif orderBy eq 'Date_Created' and orderDir eq 'asc'>&orderDir=desc</cfif>">Date Created<cfif orderBy eq "Date_Created">&nbsp;&nbsp;<cfif orderDir eq "asc">#ascImage#<cfelse>#descImage#</cfif></cfif></a></th>
				</tr>
				<cfloop query="volunteers">
					<tr<cfif currentRow mod 2 eq 0> class="evenRow"<cfelse> class="oddRow"</cfif>>
						<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
							<td><input type="checkbox" name="volunteerIDs" value="#Volunteer_ID#" onclick="updateSelectAll(this.checked);"<cfif ListFind(volunteerIDs, Volunteer_ID)> checked</cfif>></td>
						</cfif>
						<td><a href="#script_name#?view=volunteer&rv=#view#&volunteerID=#Volunteer_ID#">#Volunteer_ID#</a></td>
						<cfif IsUserInRole("Super User")>
							<td>
								<cfif statewide>
									Statewide
								<cfelse>
									#application.volunteerGateway.getVolunteerRegionIds(volunteer_id)#
								</cfif>
							</td>
						</cfif>
						<td>#First_Name# #Last_Name#</td>
						<td>#title#</td>
						<td>#organization#</td>
						<td>#phone1#</td>
						<td>#Email#</td>
						<td>#dateformat(date_created, "m/d/yyyy")#</td>
					</tr>
				</cfloop>
			</table>

		</cfif>

	</cfform>

	<cfif volunteers.RecordCount eq 0>

		<div class="alert alert-info notFound">No volunteers with the selected filter criteria</div>

		<!--- show filter --->
		<cfif IsUserInRole("Super User") or IsUserInRole("Regional Admin")>
			<script type="text/javascript" language="javascript">
			<!--
				toggleVisibility('filterSelections');
				toggleVisibility('filterButtons');
				updateFilterLink();
			// -->
			</script>
		</cfif>

	</cfif>

</cfoutput>